Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(mock-doc): avoid double hydration of components #6003

Merged
merged 2 commits into from
Oct 2, 2024
Merged

fix(mock-doc): avoid double hydration of components #6003

merged 2 commits into from
Oct 2, 2024

Conversation

christian-bromann
Copy link
Member

@christian-bromann christian-bromann commented Sep 27, 2024 •
edited
Loading

What is the current behavior?

If a user would try to serialize a component that contains a declarative shadow dom, e.g.:

const { html } = await renderToString(`
  <nested-cmp-parent>
    <nested-cmp-child custom-hydrate-flag="" s-id="3">
      <template shadowrootmode="open">
        <div c-id="3.0.0.0" class="some-other-class">
          <slot c-id="3.1.1.0"></slot>
        </div>
      </template>
      <!--r.3-->
      Hello World
    </nested-cmp-child>
  </nested-cmp-parent>
`,
  {
    fullDocument: false,
    prettyHtml: true,
  },
);

Stencil would serialize the shadow root twice:

<nested-cmp-parent custom-hydrate-flag="" s-id="1">
  <template shadowrootmode="open">
    <div c-id="1.0.0.0" class="some-class">
      <slot c-id="1.1.1.0"></slot>
    </div>
  </template>
  <!--r.1-->
  <nested-cmp-child custom-hydrate-flag="" s-id="2">
    <template shadowrootmode="open">
      <div c-id="2.0.0.0" class="some-other-class">
        <slot c-id="2.1.1.0"></slot>
      </div>
    </template><template shadowrootmode="open" shadowrootmode="open">
    <div c-id="2.0.0.0" class="some-other-class">
      <slot c-id="2.1.1.0"></slot>
    </div></template>
    Hello World
  </nested-cmp-child>
</nested-cmp-parent>

What is the new behavior?

This patch ensures that we skip the template node and properly hydrate the component:

<nested-cmp-parent custom-hydrate-flag="" s-id="1">
  <template shadowrootmode="open">
    <div c-id="1.0.0.0" class="some-class">
      <slot c-id="1.1.1.0"></slot>
    </div>
  </template>
  <!--r.1-->
  <nested-cmp-child custom-hydrate-flag="" s-id="2">
    <template shadowrootmode="open">
      <div c-id="2.0.0.0" class="some-other-class">
        <slot c-id="2.1.1.0"></slot>
      </div>
    </template>
    <!--r.2-->
    Hello World
  </nested-cmp-child>
</nested-cmp-parent>

Documentation

Does this introduce a breaking change?

  • Yes
  • No

Testing

Added an integration test for this.

Other information

n/a

@christian-bromann christian-bromann requested a review from a team as a code owner September 27, 2024 23:53
tanner-reits
tanner-reits approved these changes Sep 30, 2024
View reviewed changes
Copy link
Member

@tanner-reits tanner-reits left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@christian-bromann christian-bromann added this pull request to the merge queue Oct 2, 2024
Merged via the queue into main with commit dbc2f58 Oct 2, 2024
88 checks passed
@christian-bromann christian-bromann deleted the cb/double-hydration branch October 2, 2024 19:26
@christian-bromann
Copy link
Member Author

Released in Stencil v4.22.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tanner-reits tanner-reits tanner-reits approved these changes

@gnbm gnbm Awaiting requested review from gnbm gnbm is a code owner automatically assigned from ionic-team/stencil

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@christian-bromann @tanner-reits